<template>
	<div class="kuangji navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack">
		</van-nav-bar>
		<van-sticky>
			<div class="rs_top">
				<div @click="tab_index = index" v-for="item,index in 2" :key="index" :class="index == tab_index ? 'on' : ''">
					{{index == 0 ? '持有矿机('+ my_KJ.sckj.length  + '台)' : '过期矿机('+ my_KJ.gqkj.length + '台)'}}
				</div>

				<div class="on_sold" :style="tab_index == 0 ? 'left:1.45rem' : 'left:5.25rem' "></div>
			</div>
		</van-sticky>


		<div>

			<transition name="fold-right-effect">
				
				<div class="list_view" v-if="tab_index == 0">

					<div class="sell_top">
						<div>
							<p>累计生产BTS：{{zong_bts}}</p>
							<p>待领取BTS：<span style="color: #00FECA;">{{zong_dlq}}</span></p>
						</div>
						<button @click="getAllkjmoney">
							<img src="../../assets/robot/ljsc.png" alt="">
							全部领取
						</button>
					</div>
					
					
					<div v-if="my_KJ.sckj == ''" style="text-align: center;padding-top: 2rem;">
						<van-loading size="24px">加载中...</van-loading>
					</div>
					
					
					<div v-if="my_KJ.sckj.length <= 0 && my_KJ.sckj != ''" style="text-align: center;padding-top: 2rem;">
						<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
					</div>
					
					
					<div class="tran_item" v-for="item,index in my_KJ.sckj" :key="index">
						<div>{{item.name}}</div>
						<div class="top">
							<span>已领取：{{item.lingqu}}BTS</span>
							<span>待领取：{{item.lingqus}}BTS</span>
						</div>
						<div>
							<div class="top">
								<span>收益值：{{item.shouyi_num * item.num}}BTS</span>
								<span>算力：{{item.suanli}}</span>
							</div>

							<button v-if="item.dlq > 0" @click="lingqu(item.id,index)">领取</button>
							<button class="off" v-if="item.dlq <= 0">生产中</button>
						</div>
					</div>
				</div>
			</transition>

			<transition name="fold-left-effect">
				
					<div class="list_view" v-if="tab_index == 1">
						
						<div v-if="my_KJ.gqkj == ''" style="text-align: center;padding-top: 2rem;">
							<van-loading size="24px">加载中...</van-loading>
						</div>
				
					
						<div v-if="my_KJ.gqkj.length <= 0 && my_KJ.gqkj != ''" style="text-align: center;padding-top: 2rem;">
							<p style="color: rgba(255,255,255,.5);font-size: .28rem;">暂无数据</p>
						</div>
						
						
						<div class="tran_item" v-for="item,index in my_KJ.gqkj" :key="index">
							<div>{{item.name}}</div>
							<div class="top" style="justify-content: space-between;">
								<span>累计收益：{{item.shouyi_num * item.num}}</span>
								<span>过期时间：{{item.over_time1}}</span>
							</div>
							
						</div>
					</div>
			</transition>
		</div>

	</div>
</template>

<script>
	export default {
		name: "transaction",
		components: {},
		async created() {
			
			try{
				
				const data = await this.$apis.Common.mykuangji()

				data.data.sckj.forEach( (item,index)=>{
					this.zong_bts += Number(item.lingqu)
					this.zong_dlq += Number(item.lingqus)
				})

				this.my_KJ = data.data
				
			}catch(e){
				//TODO handle the exception
			}

			// this.getList()

		},
		data() {
			return {
				my_KJ:{
					sckj:'',
					gqkj:''
				},
				
				tab_index: 0,
				
				zong_bts:0,
				
				zong_dlq:0,

				// 领取单个收益防抖
				lq_dan:true,
					
				// 领取全部防抖
				lq_all:true

			}
		},
		methods: {
			// 领取收益
			async lingqu(id,index){
				
				if(!this.lq_dan) return this.$toast("点击过于频繁,稍后再试~")
				
				this.lq_dan = false
				
				try{
					
					const data = await this.$apis.Common.getKjmoney({orderid:id})
					
					this.my_KJ.sckj[index].dlq = 0
					
					this.$toast(data.msg)
					
					setTimeout( () => {this.lq_dan = true},3000)
					
				}catch(e){
					
					this.$toast(e.msg)
					
					setTimeout( () => {this.lq_dan = true},3000)
					//TODO handle the exception
				}
				
			},
			// 领取所有的收益
			async getAllkjmoney(){
				
				if(!this.lq_all) return this.$toast("点击过于频繁,稍后再试~")
				
				this.lq_all = false
				
				try{
					
					const data = await this.$apis.Common.getAllkjmoney()
					
					this.my_KJ.sckj.forEach( (item,index)=>{
						item.dlq = 0
					})
					
					this.$toast(data.msg)
					
					setTimeout( () => {this.lq_all = true},3000)
					
				}catch(e){
					
					this.$toast(e.msg)
					
					setTimeout( () => {this.lq_all = true},3000)
					//TODO handle the exception
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	@import '../../style/transition.less';

	.kuangji {

		.br_parameter2 {
			font-size: .28rem;
			color: #94E9FF;
			padding-bottom: 0.6rem;
			background-color: #0f223a;
			box-shadow: inset 0px 0px 0.2rem 0px #1cb0d4;

			.chushouqr {
				display: block;
				border: none;
				background-color: transparent;
				outline: none;
				box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
				font-size: .3rem;
				width: 6rem;
				height: .75rem;
				margin: auto;
				margin-top: .8rem;
				margin-bottom: 1rem;
				border-radius: .2rem;
			}

			.chushou {
				width: 100%;

				span {
					color: #00FECA;
				}


				.cs_top {
					padding: .3rem;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					p:nth-child(1) {
						display: flex;
						align-items: center;
					}
				}

				.cs_content {
					border-bottom: 1px solid #1A304F;
					padding: .5rem .35rem .39rem .34rem;
					box-sizing: border-box;

					p {
						margin-bottom: .4rem;
					}

					input {
						border: none;
						background-color: transparent;
						outline: none;
					}

					input::placeholder {
						color: #3A627E;
					}

					>div {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}

				.cs_bottom {
					padding: .18rem 0 .13rem .35rem;
					box-sizing: border-box;
					color: #94E9FF;
					font-size: .24rem;
				}
			}
		}


		.br_parameter {
			padding-bottom: .6rem;
			background-color: rgb(15, 34, 58);
			box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);

			.title {
				padding-top: .39rem;
				padding-bottom: .28rem;
				font-size: .32rem;
				color: #94E9FF;
				text-align: center;
				border-bottom: 1px solid #1A304F;
				margin-bottom: .31rem;
			}

			.buy_num {
				display: flex;
				align-items: center;
				padding-left: 2.17rem;
				color: #94E9FF;
				font-size: .3rem;
				margin-top: .38rem;
				margin-bottom: .45rem;
			}

			.van-stepper {
				border: 1px solid #94E9FF;
				box-sizing: border-box;
				border-radius: .35rem;


				/deep/ .van-stepper__input {
					width: .35rem;
					height: .35rem;
					color: #94E9FF;
					background-color: transparent;
				}

				/deep/ button {
					border-radius: 50%;
					width: .35rem;
					height: .35rem;
					background-color: #94E9FF;
					color: #11223A;
				}
			}

			p {
				padding-left: 2.17rem;
				box-sizing: border-box;
				font-size: .3rem;
				color: #94E9FF;
			}

			.br_bottom {
				display: flex;
				align-items: center;
				justify-content: space-around;

				div {
					margin-top: .96rem;
					width: 2rem;
					height: .44rem;
					background: rgba(15, 33, 56, 1);
					border-radius: .1rem;
					text-align: center;
					line-height: .44rem;
					font-size: .3rem;
				}

				>div:nth-child(1) {
					color: #94E9FF;
					box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
				}

				>div:nth-child(2) {
					color: #0F2138;
					background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
					border-radius: .1rem;
				}
			}

		}

		.list_view {
			padding-bottom: 2rem;
			position: absolute;
			width: 100%;
		}

		.sell_top {
			font-size: .26rem;
			color: #94E9FF;
			width: 100%;
			height: .96rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: .4rem .4rem .3rem .4rem;
			box-sizing: border-box;
			background-color: rgb(15, 29, 54);

			button {
				font-size: .24rem;
				box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
				border-radius: .17rem;
				border: none;
				background-color: transparent;
				display: flex;
				align-items: center;
				padding: .1rem .25rem;

				img {
					margin-right: .1rem;
				}

				span {
					margin-right: .1rem;
				}
			}
		}

		.tran_item {
			padding: .43rem .32rem .25rem .46rem;
			border-bottom: 1px solid #1A304F;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			color: #94E9FF;
			font-size: .3rem;

			div {
				display: flex;
				align-items: center;
			}

			.off{
				background: rgb(142,148,155) !important;
				color: white !important;
			}
			
			.top {
				margin-top: .1rem;
				
				>span:nth-child(1) {
					width: 2.5rem;
					font-size: .24rem;
				}

				>span:nth-child(2) {
					font-size: .24rem;
				}
			}

			>p:nth-child(2) {
				font-size: .24rem;
				margin: .14rem 0;
			}

			>div:nth-child(3) {
				justify-content: space-between;
			}

			button,
			.sell_button button {
				width: 1.3rem;
				height: .35rem;
				background: linear-gradient(0deg, rgba(28, 206, 244, 1), rgba(0, 254, 202, 1));
				border-radius: .1rem;
				text-align: center;
				color: #0F2138;
				line-height: .41rem;
				border: none;
				background-color: transparent;
			}

			.sell_bottom {
				justify-content: space-between;
				margin-top: .3rem;
				font-size: .24rem;

				.sell_button button {
					width: 1.1rem;
					padding: 0rem .1rem;
					margin-left: .18rem;
				}

				button:nth-child(2) {
					width: 1.2rem;
				}
			}
		}

		.rs_top {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			height: .88rem;
			background-color: rgb(17, 32, 55);
			box-shadow: inset 0px 0px .2rem 0px rgba(28, 176, 212, 1);
			font-size: .3rem;
			color: #3A627E;

			.on {
				color: #94E9FF;
			}

			.on_sold {
				position: absolute;
				width: .8rem;
				height: 2px;
				background-color: #94E9FF;
				bottom: 0;
				transition: all .5s;
			}
		}
	}
</style>
